<template>
    <div>
        <div class="crumbs">
            <div class="contentbox">
                <div class="contentsize">事务办件-委托运营（续期、终止、补充）</div>
                <div>
                    <el-button @click="cacelsubmitForm('ruleForm')">返回</el-button>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="addtitle">委托运营（续期、终止、补充）</div>
            <!-- 房屋接管表格 -->
            <table class="table-1">
                <!-- 三行三列的表格 -->
                <tr>
                    <td colspan="4" style="font-weight: 700;padding: 10px;font-size: 20px;">委托运营（续期、终止、补充）</td>
                </tr>
                <tr style="background-color: #F5FAFA;">
                    <td style="text-align: right;font-weight: 700;color: #000;">合同类型:</td>
                    <td>
                        <el-select v-model="form.processtableInfo.htlx" placeholder="请选择合同类型" style="width: 100%;">
                            <el-option v-for="item in htlist" :key="item.code" :label="item.name" :value="item.code">
                            </el-option>
                        </el-select>
                    </td>
                    <td style="text-align: right;font-weight: 700;color: #000;">选择合同:</td>
                    <td>
                        <el-button @click="getfwlist" type="text">选择合同</el-button>
                        <!-- <el-select v-model="form.processtableInfo.buildid" placeholder="请选择房屋地址" style="width: 100%;"
                            @change="getbuildval" filterable>
                            <el-option v-for="item in lzlist" :key="item.fwdz" :label="item.fwdz" :value="item.id">
                            </el-option>
                        </el-select> -->
                    </td>
                </tr>
                <tr style="background-color: #F6EED9;">
                    <td style="text-align: right;width: 147.9px;font-weight: 700;color: #000">房屋地址:</td>
                    <td colspan="3">
                        {{ form.processtableInfo.fwdz }}
                    </td>
                </tr>
                <tr>
                    <td style="text-align: right;font-weight: 700;color: #000;">档案号:</td>
                    <td>
                        {{ form.processtableInfo.dabh }}
                    </td>
                    <td style="text-align: right;font-weight: 700;color: #000;">产权单位:</td>
                    <td>
                        {{ form.processtableInfo.cqdw }}
                    </td>
                </tr>
                <tr style="background-color: #F5FAFA;">
                    <td style="text-align: right;font-weight: 700;color: #000;">建筑面积:</td>
                    <td>
                        {{ form.processtableInfo.jzmj }}
                    </td>
                    <td style="text-align: right;font-weight: 700;color: #000;">房屋性质:</td>
                    <td>
                        {{ form.processtableInfo.fwyt }}
                    </td>

                </tr>
                <!-- 旧数据 -->
                <tr>
                    <td style="text-align: right;font-weight: 700;color: #000;">受托人:</td>
                    <td>
                        {{ oldform.stdwmc }}
                    </td>
                    <!-- <td style="text-align: right;font-weight: 700;color: #000;">受托期限:</td>
                    <td>
                        {{ form.processtableInfo.stqx }}个月
                    </td> -->
                </tr>
                <tr style="background-color: #F5FAFA;">
                    <td style="text-align: right;font-weight: 700;color: #000;">受托起始时间:</td>
                    <td>
                        {{ oldform.qsrq ? oldform.qsrq.split(' ')[0] : '' }}
                    </td>
                    <td style="text-align: right;font-weight: 700;color: #000;">受托到期时间:</td>
                    <td>
                        {{ oldform.zzrq ? oldform.zzrq.split(' ')[0] : '' }}
                    </td>
                </tr>
                <tr>
                    <td style="text-align: right;font-weight: 700;color: #000;">租金分成比例:</td>
                    <td>
                        {{ oldform.fcbl }}%
                    </td>
                    <td style="text-align: right;font-weight: 700;color: #000;">维修基金比例:</td>
                    <td>
                        {{ oldform.wxjjbl }}%
                    </td>
                </tr>
                <tr>
                    <td colspan="4" style="font-weight: 700;padding: 10px;font-size: 20px;">----------</td>
                </tr>
                <!-- 续期数据 -->
                <tr v-if="form.processtableInfo.htlx == '1'">
                    <td style="text-align: right;font-weight: 700;color: #000;">受托人:</td>
                    <td>
                        <el-select v-model="form.processtableInfo.xqstr" placeholder="请选择受托人" style="width: 100%;">
                            <el-option v-for="item in wtdwlists" :key="item.id" :label="item.dwmc" :value="item.id">
                            </el-option>
                        </el-select>
                    </td>
                    <!-- <td style="text-align: right;font-weight: 700;color: #000;">续期受托期限:</td>
                    <td>
                        {{ form.processtableInfo.xqstqx }}个月
                    </td> -->
                </tr>
                <tr style="background-color: #F5FAFA;" v-if="form.processtableInfo.htlx == '1'">
                    <td style="text-align: right;font-weight: 700;color: #000;">续期受托起始时间:</td>
                    <td>
                        <el-date-picker type="date" placeholder="选择受托起始时间" v-model="form.processtableInfo.xqstqssj"
                            style="width: 100%" value-format="yyyy-MM-dd"></el-date-picker>
                    </td>
                    <td style="text-align: right;font-weight: 700;color: #000;">续期受托到期时间:</td>
                    <td>
                        <el-date-picker type="date" placeholder="选择受托到期时间" v-model="form.processtableInfo.xqstdqsj"
                            style="width: 100%" value-format="yyyy-MM-dd"
                            @change="calculateMonthDifference(form.processtableInfo.xqstqssj, form.processtableInfo.xqstdqsj)"></el-date-picker>
                    </td>
                </tr>
                <tr v-if="form.processtableInfo.htlx == '2'">
                    <td style="text-align: right;font-weight: 700;color: #000;">终止日期:</td>
                    <td>
                        <el-date-picker type="date" placeholder="选择终止日期" v-model="form.processtableInfo.wtzzsj"
                            style="width: 100%" value-format="yyyy-MM-dd"></el-date-picker>
                    </td>
                    <td style="text-align: right;font-weight: 700;color: #000;">终止原因:</td>
                    <td>
                        <el-input v-model="form.processtableInfo.wtzzyy" placeholder="请输入终止原因"
                            class="search-input"></el-input>
                    </td>
                </tr>
                <tr>
                    <td style="text-align: right;font-weight:700;color:#000" v-if="form.processtableInfo.htlx == '1'">
                        续期租金分成比例:</td>
                    <td v-if="form.processtableInfo.htlx == '1'">
                        <el-input v-model="form.processtableInfo.xqzjfcbl" placeholder="请输入租金分成比例" class="search-input"
                            oninput="value=value.replace(/^([0-9-]\d*\.?\d{0,2})?.*$/,'$1')">
                            <i slot="suffix" style="font-style:normal;margin-right: 10px;line-height: 32px;">%</i>
                        </el-input>
                    </td>
                    <td style="text-align: right;font-weight:700;color:#000" v-if="form.processtableInfo.htlx == '1'">
                        续期维修基金比例:</td>
                    <td v-if="form.processtableInfo.htlx == '1'">
                        <el-input v-model="form.processtableInfo.xqwxjjbl" placeholder="请输入维修基金比例" class="search-input"
                            oninput="value=value.replace(/^([0-9-]\d*\.?\d{0,2})?.*$/,'$1')">
                            <i slot="suffix" style="font-style:normal;margin-right: 10px;line-height: 32px;">%</i>
                        </el-input>
                    </td>
                </tr>
                <tr>
                    <td style="text-align: right;font-weight: 700;color: #000;">经办人签字:</td>
                    <td :colspan="form.processtableInfo.htlx == '1' ? '1' : '3'">
                        <el-input v-model="form.processtableInfo.jbrqz" placeholder="请输入经办人签字"
                            class="search-input"></el-input>
                    </td>
                </tr>
                <tr style="background-color: #F5FAFA;">
                    <!-- <td style="text-align: right;font-weight: 700;color: #000;">是否转办件:</td>
                    <td>
                        <el-select v-model="form.processtableInfo.sfzbj" placeholder="请选择是否转办件" style="width: 100%">
                            <el-option v-for="item in sflist" :key="item.code" :label="item.name" :value="item.code">
                            </el-option>
                        </el-select>
                    </td> -->
                    <td colspan="2"><el-button size="mini" type="danger" @click="gotoyaojian">要件</el-button></td>
                </tr>
                <tr>
                    <td style="text-align: right;font-weight: 700;color: #000;">办件事由:</td>
                    <td colspan="3">
                        <el-input v-model="form.processtableInfo.bjsy" placeholder="请输入办件事由" type="textarea"
                            :autosize="{ minRows: 4 }" class="search-input"></el-input>
                    </td>
                </tr>
                <tr style="background-color: #F5FAFA;">
                    <td colspan="4">
                        <el-button size="mini" type="primary" @click="qdclick" :disabled="isSubmit">启动</el-button>
                        <el-button size="mini" type="warning" @click="zcstart">暂存</el-button>
                        <el-button size="mini" @click="cacelsubmitForm('ruleForm')">返回</el-button>
                    </td>
                </tr>
            </table>
        </div>
        <el-dialog title="要件" :visible.sync="yjshow" :modal-append-to-body="false" width="80%">
            <el-form ref="yjform" :model="yjform" label-width="auto" :inline="true">
                <el-form-item label="文件类型:" prop="yjlx">
                    <el-cascader :options="yjlxlist" :show-all-levels="false" v-model="yjlx" placeholder="请选择文件类型"
                        :props="{ checkStrictly: true }" clearable></el-cascader>
                    <!-- <el-select v-model="yjform.yjlx" placeholder="请选择文件类型" style="width: 100%;">
                        <el-option v-for="item in yjlxlist" :key="item.code" :label="item.name" :value="item.code">
                        </el-option>
                    </el-select> -->
                </el-form-item>
                <el-form-item label="文件名称:" prop="yjbz">
                    <el-input placeholder="请输入文件名称" v-model="yjform.yjbz" style="width: 100%;"></el-input>
                </el-form-item>
                <el-form-item label="是否需要盖章:" prop="sfgz">
                    <el-select v-model="yjform.sfgz" placeholder="请选择是否需要盖章" style="width: 100%;" clearable>
                        <el-option v-for="item in sflist" :key="item.code" :label="item.name" :value="item.code">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="盖章类型:" prop="gzlx">
                    <el-select v-model="yjform.gzlx" placeholder="请选择盖章类型" style="width: 100%;" clearable>
                        <el-option v-for="item in gzlxlist" :key="item.code" :label="item.name" :value="item.code">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-upload class="upload-demo" :action="httpUrl + '/file/uploadFile'" :on-remove="handleRemoves"
                    :before-remove="beforeRemoves" multiple :on-success="handelfilesuccess" :headers="myHeaders"
                    :file-list="filefileList">
                    <div class="unloadTitle">附件</div>
                    <el-button size="small" icon="el-icon-upload2">上传文件</el-button>
                </el-upload>
            </el-form>
            <div style="width: 220px;margin: auto;">
                <el-button type="primary" @click="submitForm" v-if="fileLists.length != 0">上传</el-button>
                <el-button @click="yjshow = false">关闭</el-button>
            </div>
            <div id="sortableDiv">
                <el-table :data="yjtableData" style="width: 100%;margin: 30px auto 0;" border ref="pxtable" row-key="no"
                    :cell-style="cellposion">
                    <el-table-column prop="yjlx" label="文件类别" align="center"></el-table-column>
                    <el-table-column prop="wjmc" label="文件" align="center"> </el-table-column>
                    <el-table-column prop="sfgz" label="是否需要盖章" align="center"> </el-table-column>
                    <el-table-column prop="gzlx" label="盖章类型" align="center"> </el-table-column>
                    <el-table-column prop="yjbz" label="文件名称" align="center"> </el-table-column>
                    <el-table-column label="操作" width="100" align="center">
                        <template slot-scope="scope">
                            <el-button type="text" size="small"
                                @click.native.prevent="deleteRow(scope.$index, yjtableData)"
                                style="color: red">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-dialog>
        <el-dialog title="合同列表" :visible.sync="fwshow" :modal-append-to-body="false" width="80%">
            <div style="overflow: hidden;">
                <el-form ref="fwform" :model="fwform" label-width="80px" :inline="true" size="mini">
                    <el-form-item label="房屋地址:">
                        <div style="width:150px">
                            <el-input v-model="fwform.fwdz" placeholder="请输入房屋地址"></el-input>
                        </div>
                    </el-form-item>
                    <el-form-item label="档案编号:">
                        <div style="width:150px">
                            <el-input v-model="fwform.dabh" placeholder="请输入档案编号"></el-input>
                        </div>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSearch" icon="el-icon-search">查询</el-button>
                        <el-button @click="reSearch" icon="el-icon-refresh">重置</el-button>
                    </el-form-item>
                </el-form>
                <el-table :data="tableData" style="width: 100%" :header-cell-style="tableHeaderColor"
                    :row-style="tablerowColor" border>
                    <el-table-column prop="dabh" label="档案编号" align="center" width="240" :show-overflow-tooltip="true">
                    </el-table-column>
                    <el-table-column prop="fwdz" label="房屋地址" align="center" width="280" :show-overflow-tooltip="true">
                    </el-table-column>
                    <el-table-column prop="cqdw" label="产权单位" align="center" :show-overflow-tooltip="true">
                    </el-table-column>
                    <el-table-column prop="fwyt" label="房屋性质" align="center"> </el-table-column>
                    <el-table-column prop="jzmj" label="建筑面积" align="center"> </el-table-column>
                    <el-table-column prop="stdwmc" label="受托单位" align="center" :show-overflow-tooltip="true">
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" align="center" width="120px">
                        <template slot-scope="scope">
                            <el-button type="text" @click="getlzClick(scope.row)">选择</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagination" style="float: right">
                    <el-pagination background layout="total,sizes,prev, pager, next,jumper" :total="total"
                        :current-page.sync="current" :page-size="pageSize" @current-change="handleCurrentChange"
                        :page-sizes="[10, 20, 30, 40, 50, 100]" @size-change="handleSizeChange">
                    </el-pagination>
                </div>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { lcstart, download, buildlist, getbuilddetailbydabh, wtdwlist, detailsbybuildid, builddetail, getwtyysignlist } from '@/api/index';
import fileType from "../vo/filetype";
import valueList from '@/components/common/valueList.vue'
import global from '@/components/common/httpurl.vue'
import Sortable from 'sortablejs'
export default {
    name: 'wttqstart',
    data() {
        return {
            yjlx: [],
            total: 0,
            current: 1,
            pageSize: 10,
            isSubmit: false,
            fwshow: false,//房屋列表
            yjlxlist: valueList.yjlxlist,//是否列表
            yjdeepcolor: null,
            yjshow: false,//文件弹框
            yjform: {
                yjlx: null,
                gzlx: null,
                sfgz: null
            },//文件表单
            jgxslist: valueList.jgxslist,//接管形式
            qslist: valueList.qslist,//区属列表
            fwytlist: valueList.fwytlist,//房屋性质
            cblist: valueList.cblist,//产别
            cqdwlist: valueList.cqdwlist,//产权单位
            sflist: valueList.sflist,//是否列表
            gzlxlist: valueList.gzlxlist,//盖章类型
            htlist: [{ name: '委托续期', code: '1' }, { name: '委托终止', code: '2' }, { name: '委托补充', code: '3' }],
            myHeaders: {
                'token': localStorage.getItem('token')
            },
            filefileList: [],
            httpUrl: global.httpUrl,//公共地址
            form: {
                clyj: '',// 处理意见 ,
                fileList: [],// 流程文件信息 ,
                processcode: 'wthtqd',// 流程编码 ,wthtqd委托合同签订
                processtableInfo: {
                    htlx: '1',
                    bjsy: '',// 办件事由 ,
                    caseid: '',// 流程实例id ,
                    cb: '',// 产别 ,
                    cqdw: '',// 产权单位 ,
                    create_name: '',// 创建人 ,
                    create_name_id: '',// 创建人id ,
                    create_time: '',// 创建时间 ,
                    dabh: '',// 档案编号 ,
                    dz: '',// 地址 ,
                    fwyt: '',// 房屋性质 ,
                    gzwjmc: '',// 盖章文件名称 ,
                    id: '',// id ,
                    jbrqz: '',// 经办人签字 ,
                    jgxs: '',// 接管形式 ,
                    qs: '',// 区属 ,
                    sfzbj: '',// 是否转办件 ,
                    status_code: '1',// 1正常 2删除 ,
                    update_name: '',// 修改人 ,
                    update_name_id: '',// 修改人id ,
                    update_time: '',// 修改时间,
                    stdqsj: '',// 受托到期时间 ,
                    stqssj: '',//受托起始时间 ,
                    stqx: '0',// 受托期限 ,
                    str: '',// 受托人 ,
                    zjfcbl: '',// 租金分成比例 ,
                    xqstqx: '',//续期到期期限
                },// 流程表单信息 ,
                userid: this.$store.getters.userId,// 用户id
            },
            fileList: [],
            fileType: fileType,
            yjtableData: [],
            tableData: [],
            yjlist: ['同意', '不同意', '同意，请认真办理！', '不同意，请认真复核！', '拟同意，请领导批示！', '请办公室盖章！', '已盖章', '已办理，请归档！'],
            fileLists: [],//文件列表
            bmlist: [],//部门列表
            lzform: {
                cb: '',
                cqdw: '',
                create_name: '',
                create_name_id: '',
                create_time: '',
                current: 1,
                czr: '',
                dabh: '',
                dqsj: '',//合同到期时间 ,
                fwdz: '',//地址 ,
                id: '',
                jzmj: '',//建筑面积 ,
                pageSize: 999,//每页数量 ,
                qs: '',//区属 ,
                signid: '',
                status_code: '1',
                type: this.$store.getters.type,//分类 1:房屋 2：楼栋 ,
                update_name: '',
                update_name_id: '',
                update_time: '',
                yzj: '',
                fczt: '1'
            },
            lzlist: [],//楼幢列表,
            wtdwlists: [],//委托单位
            wtdwform: {
                create_time: '',//创建时间 ,
                current: 1,//第几页 ,
                dwbh: '',//单位编号 ,
                dwmc: '',//单位名称 ,
                id: '',//id ,
                lxdh: '',// 联系电话 ,
                lxr: '',//联系人 ,
                pageSize: 999,//每页数量 ,
                status_code: 1,//1正常 2删除
                tght: '',//托管合同 ,
                yyzz: '',//营业执照
            },
            oldform: {},
            fwform: {
                cqdw: '',// 产权单位 ,
                current: 1,
                dabh: '',//档案编号 ,
                fcbl: '',//分成比例 ,
                fwdz: '',//地址 ,
                fwyt: '',//房屋性质 ,
                id: '',//id ,
                jzmj: '',//建筑面积 ,
                note: '',//备注 ,
                pageSize: 10,//每页数量 ,
                qsrq: '',//起始时间 ,
                relid: '',// 关联ID ,
                stdwmc: '',//受托单位名称 ,
                stgldw: '',//受托管理单位id ,
                wxjjbl: '',//维修基金比例 ,
                zzrq: '',//终止时间
            }
        };
    },
    methods: {
        // 拖拽组件
        rowDrop() {
            const tableref = this.$refs.pxtable.$el
            const tbody = tableref.querySelector('#sortableDiv .el-table .el-table__body-wrapper .el-table__body tbody')
            const _this = this
            //这个就是拖拽组件库的使用
            Sortable.create(tbody, {
                onEnd: (evt) => {
                    console.log(evt, '拖拽11')
                    const changedata = _this.yjtableData.splice(evt.oldIndex || 0, 1)
                    _this.yjtableData.splice(evt.newIndex || 0, 0, changedata[0])
                    console.log(_this.yjtableData, '拖拽表格')
                }
            })
        },
        cellposion() {
            return 'cursor: pointer;';
        },
        // 列表样式
        tableHeaderColor({ row, column, rowIndex, columnIndex }) {
            if (rowIndex === 0) {
                return 'background-color: #f7f7f7;color:black;height: 54px;font-weight: 500;font-size:14px;font-variant:tabular-nums'
            }
        },
        tablerowColor({ row, rowIndex }) {
            return 'height: 42px;font-size:14px;'
        },
        // 计算两个时间
        calculateMonthDifference(startDate, endDate) {
            const start = new Date(startDate);
            const end = new Date(endDate);
            const startYear = start.getFullYear();
            const startMonth = start.getMonth();
            const endYear = end.getFullYear();
            const endMonth = end.getMonth();
            let yearDifference = endYear - startYear;
            let monthDifference = endMonth - startMonth;

            // 如果结束月份小于开始月份，则需要减去一年
            if (monthDifference < 0) {
                yearDifference--;
                monthDifference += 12;
            }
            this.form.processtableInfo.xqstqx = yearDifference * 12 + monthDifference
            // return yearDifference * 12 + monthDifference;
        },
        // 下载文件
        downloadfile(id, name, type) {
            console.log(id)
            let filetype = fileType[type];
            let data = {
                fileid: id
            }
            download(data).then(res => {
                const link = document.createElement('a');
                let blob = new Blob([res], {
                    type: filetype
                });
                link.style.display = 'none';
                //设置连接
                link.href = URL.createObjectURL(blob);
                link.download = name;
                document.body.appendChild(link);
                //模拟点击事件
                link.click();
                console.log(res)
            })
        },
        // 文件
        handleRemoves(file, fileList) {
            console.log(fileList)
            this.fileLists = fileLists
        },
        // 文件删除前
        beforeRemoves(file, fileList) {
            console.log(file)
            console.log(fileList)
            return this.$confirm(`确定移除 ${file.name}？`);
        },
        // 上传成功
        handelfilesuccess(response, file, fileLists) {
            console.log(fileLists)
            this.fileLists = fileLists
            this.$message.success('导入成功');
        },
        // 获取到每一个意见值
        getYjVal(val, i) {
            this.yjdeepcolor = i
            console.log(val)
            this.form.clyj = val
        },
        // 取消
        cacelsubmitForm() {
            this.$router.go(-1);
        },
        // 文件弹框
        gotoyaojian() {
            this.yjshow = true
            this.$nextTick(() => {
                this.rowDrop()
            });
        },
        // 删除
        deleteRow(index, rows) {
            this.$confirm('确定删除此条文件吗？')
                .then(() => {
                    rows.splice(index, 1);
                })
                .catch(() => {
                    this.$message.success('删除取消');
                });
        },
        // 上传功能
        submitForm() {
            if (this.yjlx) {
                var lastItem = this.yjlx[this.yjlx.length - 1]
                this.yjform.yjlx = lastItem
                //this.yjform.yjlx=this.yjform.yjlx.pop();

            } else {
                this.$message.error('请选择文件类型');
                return
            }
            console.log('yjlx', this.yjform.yjlx)
            console.log('yjbz', this.yjform.yjbz)
            console.log('fileLists', this.fileLists)
            // 类型 suffix
            let yjlb = this.fileLists.map(res => {
                return {
                    caseid: '',// 流程实例id ,
                    create_name: '',//创建人 ,
                    create_name_id: '',//创建人id ,
                    create_time: '',//创建时间 ,
                    fj: res.response.data.id,//附件
                    id: '',// id ,
                    status_code: '1',// 1正常 2删除 ,
                    update_name: '',// 修改人 ,
                    update_name_id: '',//修改人id ,
                    update_time: '',//修改时间 ,
                    wjmc: res.response.data.filename,//文件名称 ,
                    yjbz: this.yjform.yjbz,//文件名称 ,
                    yjlx: this.yjform.yjlx,//文件类型
                    sfgz: this.yjform.sfgz,//是否需要盖章
                    gzlx: this.yjform.gzlx,//盖章类型
                }
            })
            console.log('yjlb', yjlb)
            this.yjtableData = this.yjtableData.concat(yjlb)
            this.yjform.yjlx = null;
            this.yjform.yjbz = null;
            this.yjform.sfgz = null;
            this.yjform.gzlx = null;
            this.yjlx = null;
            // 遍历重新赋值
            this.yjtableData.forEach((item, index) => {
                item.no = index
            })
            this.filefileList = [];
            this.fileLists = [];
            this.$nextTick(() => {
                this.rowDrop()
            });
        },
        // 暂存内容
        // 点击暂存存入sessionStorage
        // 进入页面先判断sessionStorage里面是否有值
        // 流程启动时删除sessionStorage
        zcstart() {
            this.form.fileList = this.yjtableData;
            sessionStorage.setItem('wttqform', JSON.stringify(this.form))
            this.$message.success('暂存成功！！')
        },
        // 流程启动接口
        lcstart(data) {
            lcstart(data).then(res => {
                if (res.code == 200) {
                    this.$message.success('已启动流程')
                    this.isSubmit = false
                    sessionStorage.removeItem('wttqform')
                    this.$router.go(-1);
                }
            })
        },
        // 启动流程按钮
        qdclick() {
            this.form.fileList = this.yjtableData;
            console.log('form', this.form)
            this.isSubmit = true
            this.lcstart(this.form)
        },
        // 委托列表
        buildlist(data) {
            buildlist(data).then((res) => {
                if (res.code == 200) {
                    this.lzlist = res.data.records;
                } else {
                    this.lzlist = [];
                }
            });
        },
        // 获取楼幢信息
        getbuildval(val) {
            console.log('楼幢详情', val)
            let data = {
                id: val
            }
            builddetail(data).then((res) => {
                this.form.processtableInfo.dabh = res.data.dabh
                this.form.processtableInfo.cqdw = res.data.cqdw
                this.form.processtableInfo.dz = res.data.fwdz
                this.form.processtableInfo.fwyt = res.data.fwyt
                this.form.processtableInfo.jzmj = res.data.jzmj
                this.form.processtableInfo.buildid = res.data.id
                let data = {
                    relid: res.data.id
                }
                this.detailsbybuildid(data)
            });
            // getbuilddetailbydabh(data).then(res => {
            //     console.log(res)
            //     this.form.processtableInfo.dabh = res.data.dabh
            //     this.form.processtableInfo.cqdw = res.data.cqdw
            //     this.form.processtableInfo.dz = res.data.fwdz
            //     this.form.processtableInfo.fwyt = res.data.fwyt
            //     this.form.processtableInfo.jzmj = res.data.jzmj
            //     this.form.processtableInfo.buildid = res.data.id
            //     let data = {
            //         relid: res.data.id
            //     }
            //     this.detailsbybuildid(data)
            // })
        },
        // 委托单位列表
        wtdwlist(data) {
            wtdwlist(data).then((res) => {
                if (res.code == 200) {
                    this.wtdwlists = res.data.records;
                }
            });
        },
        // 旧合同详情
        detailsbybuildid(data) {
            detailsbybuildid(data).then(res => {
                console.log('旧合同详情', res.data)
                this.form.processtableInfo.signid = res.data.id
                this.form.processtableInfo.str = res.data.stgldw
                this.form.processtableInfo.stqssj = res.data.qsrq
                this.form.processtableInfo.stdqsj = res.data.zzrq
                this.form.processtableInfo.zjfcbl = res.data.fcbl
                this.form.processtableInfo.wxjjbl = res.data.wxjjbl
                this.oldform = res.data
                this.fwshow = false
            })
        },

        //打开房屋列表弹框 
        getfwlist() {
            this.fwshow = true
            this.current = 1;
            this.fwform = {
                cqdw: '',// 产权单位 ,
                current: 1,
                dabh: '',//档案编号 ,
                fcbl: '',//分成比例 ,
                fwdz: '',//地址 ,
                fwyt: '',//房屋性质 ,
                id: '',//id ,
                jzmj: '',//建筑面积 ,
                note: '',//备注 ,
                pageSize: 10,//每页数量 ,
                qsrq: '',//起始时间 ,
                relid: '',// 关联ID ,
                stdwmc: '',//受托单位名称 ,
                stgldw: '',//受托管理单位id ,
                wxjjbl: '',//维修基金比例 ,
                zzrq: '',//终止时间
            };
            this.getwtyysignlist(this.fwform);
        },
        // 换页
        handleCurrentChange(val) {
            this.current = val;
            this.fwform.current = val;
            this.fwform.pageSize = this.pageSize
            this.getwtyysignlist(this.fwform);
            console.log(val);
        },
        // 每页条数
        handleSizeChange(val) {
            this.current = 1;
            this.pageSize = val;
            this.fwform.pageSize = val;
            this.getwtyysignlist(this.fwform);
            console.log(val);
        },
        // 搜索
        onSearch() {
            this.current = 1;
            this.fwform.current = 1;
            this.getwtyysignlist(this.fwform);
            console.log('搜索');
        },
        // 重置
        reSearch() {
            this.current = 1;
            this.pageSize = 10;
            this.fwform = {
                cqdw: '',// 产权单位 ,
                current: 1,
                dabh: '',//档案编号 ,
                fcbl: '',//分成比例 ,
                fwdz: '',//地址 ,
                fwyt: '',//房屋性质 ,
                id: '',//id ,
                jzmj: '',//建筑面积 ,
                note: '',//备注 ,
                pageSize: 10,//每页数量 ,
                qsrq: '',//起始时间 ,
                relid: '',// 关联ID ,
                stdwmc: '',//受托单位名称 ,
                stgldw: '',//受托管理单位id ,
                wxjjbl: '',//维修基金比例 ,
                zzrq: '',//终止时间
            };
            this.getwtyysignlist(this.fwform);
            console.log('搜索');
        },
        // 选择获取房屋信息
        getlzClick(val) {
            console.log('id', val)
            this.form.processtableInfo.dz = val.fwdz
            this.form.processtableInfo.dabh = val.dabh
            this.form.processtableInfo.cqdw = val.cqdw
            this.form.processtableInfo.jzmj = val.jzmj
            this.form.processtableInfo.fwyt = val.fwyt
            this.form.processtableInfo.buildid = val.relid
            let data = {
                relid: val.relid
            }
            this.detailsbybuildid(data)
            // this.getjfxq(val)
        },
        // 项目列表
        getwtyysignlist(data) {
            getwtyysignlist(data).then((res) => {
                if (res.code == 200) {
                    this.tableData = res.data.records;
                    this.total = res.data.total;
                } else {
                    this.tableData = [];
                    this.total = 0;
                }
            });
        },
    },
    mounted() {
        this.buildlist(this.lzform)
        this.wtdwlist(this.wtdwform)
        if (sessionStorage.getItem('wttqform')) {
            this.form = JSON.parse(sessionStorage.getItem('wttqform'))
            this.yjtableData = this.form.fileList
        }
    }
};
</script>
<style>
.el-upload-list {
    width: 60%;
}

.el-upload--text {
    width: auto;
    height: 80px;
    overflow: hidden;
    border: none;
}

/* disabled颜色修改 */
.el-checkbox__input.is-disabled+.el-checkbox__label {
    color: #606266 !important;
}

.el-checkbox__input.is-disabled.is-checked+.el-checkbox__label {
    color: #606266 !important;
}

.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner:after {
    border-color: #606266 !important;
}

.el-radio__input.is-disabled+span.el-radio__label {
    color: #606266 !important;
}

.el-radio__input.is-disabled.is-checked .el-radio__inner::after {
    background-color: #606266 !important;
}

.el-radio__input.is-disabled .el-radio__inner,
.el-radio__input.is-disabled.is-checked .el-radio__inner {
    border-color: #606266 !important;
}

.el-input.is-disabled .el-input__inner,
textarea:disabled {
    color: #606266 !important;
}

.el-range-editor.is-disabled input {
    color: #606266 !important;
}
</style>
<style scoped>
/* 选择意见 */
.xzyj {
    width: 48%;
    height: 110px;
    overflow-y: scroll;
    overflow-x: hidden;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    padding: 10px 0;
    box-sizing: border-box;
}

.xzyj .xzyjitem {
    text-align: left;
    cursor: pointer;
    line-height: 24px;
}

table {
    width: 70%;
    margin: auto;
    text-align: center;
}

.table-1 {
    border: 1px solid #c0c0c0;
    border-collapse: collapse;
    /*合并相邻表格的间距*/

}

.table-1 tr,
.table-1 td {
    font-size: 13px;
    border-collapse: collapse;
    border: 1px solid #c0c0c0;
    padding: 10px;
    box-sizing: border-box;
    color: #606266;
}

.container {
    overflow: hidden;
}

.crumbs {
    background-color: #fff;
    padding: 20px 20px;
}

.indexTitle {
    margin-bottom: 20px;
}

.contentbox {
    display: flex;
    justify-content: space-between;
}

.contentsize {
    font-size: 18px;
    font-weight: 700;
    line-height: 32px;
    color: #606266;
}

.handle-box {
    overflow: hidden;
}

.addtitle {
    width: 100%;
    border-bottom: 1px solid #eeeeee;
    padding-bottom: 20px;
    box-sizing: border-box;
    margin-bottom: 20px;
    font-weight: 700;
}

.buttonCenter {
    width: 12%;
    margin: auto;
}

.unloadTitle {
    text-align: left;
    padding-bottom: 10px;
    box-sizing: border-box;
    color: #606266;
}

/* 搜索按钮 */
.searchcolor {
    background-color: #7090ff;
}

.detailcontent {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.detailcontent .detailitem {
    /* float: left; */
    width: 33%;
    margin-bottom: 30px;
}

.detailcontent .detailitem1 {
    /* float: left; */
    width: 99%;
    margin-bottom: 30px;
    font-weight: 700;
    color: #008A94;
}

.detailcontent .detailitem2 {
    /* float: left; */
    width: 99%;
    margin-bottom: 30px;
}

/* 项目文件 */
.filebox {
    text-align: center;
    margin-right: 10px;
    cursor: pointer;
}

.fileboxitem:hover {
    color: #7090ff;
}

.deleteitem {
    color: red;
}

.deleteitem:hover {
    color: #eeeeee;
}
</style>